<template>
  <div class="basic-form-demo">
    <div class="example-section">
      <h3 class="section-title">基础输入框</h3>
      <p class="section-description">各种类型的输入框组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-form layout="vertical" class="demo-form">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="用户名">
                  <a-input v-model:value="formData.username" placeholder="请输入用户名" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="邮箱">
                  <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="密码">
                  <a-input-password v-model:value="formData.password" placeholder="请输入密码" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="手机号">
                  <a-input v-model:value="formData.phone" placeholder="请输入手机号" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-form-item label="个人简介">
              <a-textarea v-model:value="formData.bio" placeholder="请输入个人简介" :rows="4" />
            </a-form-item>
          </a-form>
        </div>
        <div class="result-display">
          <div class="result-label">表单数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">选择器组件</h3>
      <p class="section-description">下拉选择、多选、级联选择等组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-form layout="vertical" class="demo-form">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="性别">
                  <a-select v-model:value="selectData.gender" placeholder="请选择性别">
                    <a-select-option value="male">男</a-select-option>
                    <a-select-option value="female">女</a-select-option>
                    <a-select-option value="other">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="城市">
                  <a-select v-model:value="selectData.city" placeholder="请选择城市">
                    <a-select-option value="beijing">北京</a-select-option>
                    <a-select-option value="shanghai">上海</a-select-option>
                    <a-select-option value="guangzhou">广州</a-select-option>
                    <a-select-option value="shenzhen">深圳</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="职业">
                  <a-select v-model:value="selectData.profession" placeholder="请选择职业">
                    <a-select-option value="developer">开发工程师</a-select-option>
                    <a-select-option value="designer">设计师</a-select-option>
                    <a-select-option value="manager">产品经理</a-select-option>
                    <a-select-option value="other">其他</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="兴趣爱好">
                  <a-select
                    v-model:value="selectData.hobbies"
                    mode="multiple"
                    placeholder="请选择兴趣爱好"
                  >
                    <a-select-option value="reading">阅读</a-select-option>
                    <a-select-option value="music">音乐</a-select-option>
                    <a-select-option value="sports">运动</a-select-option>
                    <a-select-option value="travel">旅行</a-select-option>
                    <a-select-option value="coding">编程</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="技能标签">
                  <a-select
                    v-model:value="selectData.skills"
                    mode="tags"
                    placeholder="请输入或选择技能"
                  >
                    <a-select-option value="vue">Vue.js</a-select-option>
                    <a-select-option value="react">React</a-select-option>
                    <a-select-option value="angular">Angular</a-select-option>
                    <a-select-option value="nodejs">Node.js</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="result-display">
          <div class="result-label">选择数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(selectData, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">日期时间选择</h3>
      <p class="section-description">日期选择器、时间选择器、日期范围选择等</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-form layout="vertical" class="demo-form">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="出生日期">
                  <a-date-picker v-model:value="dateData.birthday" placeholder="请选择日期" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="入职时间">
                  <a-date-picker
                    v-model:value="dateData.joinTime"
                    show-time
                    placeholder="请选择日期时间"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="工作时间">
                  <a-time-picker v-model:value="dateData.workTime" placeholder="请选择时间" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="项目周期">
                  <a-range-picker v-model:value="dateData.projectPeriod" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="月份选择">
                  <a-date-picker v-model:value="dateData.month" picker="month" placeholder="请选择月份" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="result-display">
          <div class="result-label">日期数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(formatDateData(dateData), null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">数字输入与滑块</h3>
      <p class="section-description">数字输入框、滑块、评分等组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-form layout="vertical" class="demo-form">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="年龄">
                  <a-input-number
                    v-model:value="numberData.age"
                    :min="0"
                    :max="120"
                    placeholder="请输入年龄"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="薪资 (K)">
                  <a-input-number
                    v-model:value="numberData.salary"
                    :min="0"
                    :step="0.5"
                    placeholder="请输入薪资"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="工作经验 (年)">
                  <a-slider v-model:value="numberData.experience" :min="0" :max="20" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="技能评分">
                  <a-rate v-model:value="numberData.skillRating" allow-half />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="价格区间">
                  <a-slider
                    v-model:value="numberData.priceRange"
                    range
                    :min="0"
                    :max="1000"
                    :step="10"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="result-display">
          <div class="result-label">数字数据：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(numberData, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">基础表单组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础输入框">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-form layout="vertical"&gt;
    &lt;a-form-item label="用户名"&gt;
      &lt;a-input v-model:value="username" placeholder="请输入用户名" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="密码"&gt;
      &lt;a-input-password v-model:value="password" placeholder="请输入密码" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="个人简介"&gt;
      &lt;a-textarea v-model:value="bio" placeholder="请输入个人简介" :rows="4" /&gt;
    &lt;/a-form-item&gt;
  &lt;/a-form&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="选择器组件">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-form layout="vertical"&gt;
    &lt;a-form-item label="城市"&gt;
      &lt;a-select v-model:value="city" placeholder="请选择城市"&gt;
        &lt;a-select-option value="beijing"&gt;北京&lt;/a-select-option&gt;
        &lt;a-select-option value="shanghai"&gt;上海&lt;/a-select-option&gt;
      &lt;/a-select&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="兴趣爱好"&gt;
      &lt;a-select v-model:value="hobbies" mode="multiple" placeholder="请选择兴趣爱好"&gt;
        &lt;a-select-option value="reading"&gt;阅读&lt;/a-select-option&gt;
        &lt;a-select-option value="music"&gt;音乐&lt;/a-select-option&gt;
      &lt;/a-select&gt;
    &lt;/a-form-item&gt;
  &lt;/a-form&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="3" header="日期时间选择">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-form layout="vertical"&gt;
    &lt;a-form-item label="出生日期"&gt;
      &lt;a-date-picker v-model:value="birthday" placeholder="请选择日期" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="入职时间"&gt;
      &lt;a-date-picker v-model:value="joinTime" show-time placeholder="请选择日期时间" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="项目周期"&gt;
      &lt;a-range-picker v-model:value="projectPeriod" /&gt;
    &lt;/a-form-item&gt;
  &lt;/a-form&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="4" header="数字输入与滑块">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-form layout="vertical"&gt;
    &lt;a-form-item label="年龄"&gt;
      &lt;a-input-number v-model:value="age" :min="0" :max="120" placeholder="请输入年龄" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="工作经验"&gt;
      &lt;a-slider v-model:value="experience" :min="0" :max="20" /&gt;
    &lt;/a-form-item&gt;
    &lt;a-form-item label="技能评分"&gt;
      &lt;a-rate v-model:value="skillRating" allow-half /&gt;
    &lt;/a-form-item&gt;
  &lt;/a-form&gt;
&lt;/template&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Dayjs } from 'dayjs'

// 基础表单数据
const formData = ref({
  username: '',
  email: '',
  password: '',
  phone: '',
  bio: ''
})

// 选择器数据
const selectData = ref({
  gender: undefined,
  city: undefined,
  profession: undefined,
  hobbies: [],
  skills: []
})

// 日期数据
const dateData = ref<{
  birthday: Dayjs | undefined
  joinTime: Dayjs | undefined
  workTime: Dayjs | undefined
  projectPeriod: [Dayjs, Dayjs] | undefined
  month: Dayjs | undefined
}>({
  birthday: undefined,
  joinTime: undefined,
  workTime: undefined,
  projectPeriod: undefined,
  month: undefined
})

// 数字数据
const numberData = ref({
  age: undefined,
  salary: undefined,
  experience: 0,
  skillRating: 0,
  priceRange: [0, 100]
})

// 格式化日期数据用于显示
const formatDateData = (data: any) => {
  const formatted: any = {}
  for (const [key, value] of Object.entries(data)) {
    if (value && typeof value === 'object' && 'format' in value) {
      formatted[key] = value.format('YYYY-MM-DD HH:mm:ss')
    } else if (Array.isArray(value) && value.length === 2) {
      formatted[key] = value.map(v => v?.format?.('YYYY-MM-DD') || v)
    } else {
      formatted[key] = value
    }
  }
  return formatted
}
</script>

<style scoped>
.basic-form-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 24px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.demo-form {
  max-width: 100%;
}

.result-display {
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 80px;
}

.result-value {
  flex: 1;
  font-size: 12px;
  color: #595959;
}

.result-value pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: none;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 20px;
  }

  .result-display {
    flex-direction: column;
    gap: 8px;
  }

  .result-label {
    min-width: auto;
  }
}
</style>